<template>
  <div id="app" class="app">
    <!--左侧-->
    <div id="left" class="left">
      <Home/>
      <div class="linkStyle">
<!--        <router-link to="/home?id=1&name=tom" class="aLinkStyle" active-class="linkStyleActivate">Home</router-link>-->
<!--        <router-link :to="`/home?id=${id}&name=${name}`" class="aLinkStyle" active-class="linkStyleActivate">Home</router-link>-->
        <router-link :to="{
          path:'/home',
          query:{
            id:3,
            name:'jack'
          }
        }" class="aLinkStyle" active-class="linkStyleActivate">Home</router-link>
      </div>
      <div class="linkStyle">
        <router-link replace to="/about" class="aLinkStyle" active-class="linkStyleActivate">About</router-link>
      </div>

    </div>
    <!--右侧-->
    <div id="right" class="right">
      <nav class="nav">aa</nav>
      <main class="main">
        <router-view></router-view>
      </main>
      <footer class="footer"><i>网备</i></footer>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import CP from './plugins/customerPlugin.js'
import Vue from 'vue'
import MyComponent from "@/components/MyComponent";
import SlotDemo from "@/components/SlotDemo";
import NameSlotDemo from "@/components/NameSlotDemo";
import StoreDemo from "@/components/StoreDemo";
import Home from "@/pages/Home";

Vue.use(CP,1,2,3);
export default {
  name: 'App',
  components: {
    MyComponent,
    HelloWorld,
    SlotDemo,
    NameSlotDemo,
    StoreDemo,
    Home
  }
  ,data(){
    return {
      id:2,
      name:'jerry'
    }
  }
}
</script>

<style>

 html body{
   font-size: 12px;
   /*border: #3a8ee6 1vw solid;*/
 }
.app{
  display: flex;
  flex-direction: row;
}
.left{
  background-color: rgba(242,245,248,1);
  min-width: 350px;
  max-width: 350px;
  height: 51vw;
  border-right: rgba(210,220,224,1);
}
.right{
  /*background-color: yellow;*/
  height: 51vw;
  flex-grow: 1;
}
.right .nav{
  height: 50px;
  background-color: rgba(0,150,220,0.7);
}
.right .main{
  background-color: rgba(242,245,248,1);
  height: 880px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  overflow: auto;
}
.right .footer{
  background-color: rgba(240,240,240,1);;
  height: 30px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 10px;
  text-align: center;
}
.linkStyle{
  border: 1px solid grey;
  min-width: 350px;
  max-width: 350px;
  text-align: center;
  align-items: center;
  height: 40px;
  background-color: white;
}
.aLinkStyle{
  text-decoration-line: none;
  font-size: 25px;
}
.linkStyleActivate{
  background-color: #8cc5ff;
}
</style>
